<template>
  <div class="">
    <div class="job-summary clear">
      <div class="summary-infos">
        <div class="summary-title text-md">{{companyInfo.companyName}}{{jobInfo.positionName}}</div>
        <div class="summary-tags clear">
          <div v-for='tag in jobInfo.positionTag' class="fl tag">{{tag}}</div>
        </div>
        <div class="summary-stat text-sm text-gray">
          工厂规模：<span>{{companyInfo.companyScale}}</span>
        </div>
      </div>
      <div class="summary-salary">
        <span class="com-tag">{{jobInfo.positionSkewBanner}}</span>
        <span>{{jobInfo.positionSalaryRange}}</span>元/月
      </div>
    </div>
    <div class="job-subsidy">
      <table class="table table-bordered">
        <tbody>
        <tr>
          <th scope="row">综合薪资</th>
          <td>{{jobInfo.positionSalaryRange}}</td>
        </tr>
        <tr>
        <tr>
          <th scope="row">工价</th>
          <td>{{jobInfo.positionPrice}}</td>
        </tr>
        <tr>
          <th scope="row">返费</th>
          <td>{{jobInfo.positionRefee}}</td>
        </tr>
        <tr>
        <tr>
          <th scope="row">推荐费</th>
          <td>{{jobInfo.positionRecommend}}</td>
        </tr>
        <tr>
          <th scope="row">年龄</th>
          <td>{{jobInfo.positionAgeRange}}</td>
        </tr>
        <tr>
          <th scope="row">温馨提醒</th>
          <td v-html="jobInfo.positionTip"></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="job-outline top" ref="top">
      <div class="nav" ref="nav" :class="{isFixed:isFixed}">
        <div class="detail-outline">
          <a href="#salary" @click='gotoSalary()'>
            <img :src="salary_url" >
            <span>薪资说明</span>
          </a>
        </div>
        <div class="detail-outline">
          <a href="#post" @click='gotoPost()'>
            <img :src="post_url" >
            <span>岗位说明</span>
          </a>
        </div>
        <div class="detail-outline">
          <a href="#enterprise" @click='gotoEnterprise()'>
            <img :src="enterprise_url">
            <span>企业说明</span>
          </a>
        </div>
      </div>

    </div>
    <div class="detail-content" id="salary">
      <table class="table table-bordered">
        <tbody>
        <tr>
          <th class="detail-smTitle">基本情况</th>
        </tr>
        <tr>
          <th nowrap="nowrap">综合薪资</th>
          <td class="text-red">{{jobInfo.positionSalaryRange}}元</td>
        </tr>
        <tr>
          <th nowrap="nowrap">发薪日</th>
          <td>{{jobInfo.positionSalaryDay}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">底薪</th>
          <td>{{jobInfo.positionSalaryMin}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">薪资结构</th>
          <td v-html="jobInfo.positionSalaryStructure">
          </td>
        </tr>
        </tbody>
      </table>
      <table class="table table-bordered">
        <tbody>
        <tr>
          <th class="detail-smTitle">食宿介绍</th>
        </tr>
        <tr>
          <th nowrap="nowrap">伙食</th>
          <td>{{jobInfo.positionRabBoard}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">住宿</th>
          <td>{{jobInfo.positionRabRoom}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">交通</th>
          <td>{{jobInfo.positionRabTraffic}}</td>
        </tr>
        </tbody>
      </table>
      <table class="table table-bordered">
        <tbody>
        <tr>
          <th class="detail-smTitle">合同介绍</th>
        </tr>
        <tr>
          <th nowrap="nowrap">合同说明</th>
          <td>{{jobInfo.positionContractDesc}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">工资发放</th>
          <td>{{jobInfo.positionContractSalary}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">保险说明</th>
          <td>{{jobInfo.positionContract5a1}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="detail-title" id="post">岗位说明</div>
    <div class="detail-content">
      <table class="table table-bordered">
        <tbody>
        <tr>
          <th class="detail-smTitle">岗位状态</th>
        </tr>
        <tr>
          <th nowrap="nowrap">工作内容</th>
          <td>{{jobInfo.positionContext}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">工作说明</th>
          <td>{{jobInfo.positionPriceDesc}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">工作环境</th>
          <td>{{jobInfo.positionWorkEnv}}</td>
        </tr>
        </tbody>
      </table>
      <table class="table table-bordered">
        <tbody>
        <tr>
          <th class="detail-smTitle">其他信息</th>
        </tr>
        <tr>
          <th nowrap="nowrap">体检信息</th>
          <td>{{jobInfo.positionPhyInfo}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">身份证复印件</th>
          <td>{{jobInfo.positionIdCardPic}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">毕业证</th>
          <td>{{jobInfo.positionDiploma}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">照片</th>
          <td>{{jobInfo.positionIdPic}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">纹身</th>
          <td>{{jobInfo.positionTattoo}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">刀疤</th>
          <td>{{jobInfo.positionSmokeScars}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">英文字母</th>
          <td>{{jobInfo.positionLetter}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">简单算法</th>
          <td>{{jobInfo.positionMath}}</td>
        </tr>
        <tr>
          <th nowrap="nowrap">体内异物</th>
          <td>{{jobInfo.positionHealthy}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="detail-title" id="enterprise">企业说明</div>
    <div class="detail-content">
      <table class="table table-bordered">
        <tr>
          <td>{{companyInfo.companyDesc}}</td>
        </tr>
        <tr>
          <td>企业地址：{{companyInfo.companyLocation}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  var throttle = require('lodash/throttle');
  import salary_no from '../../../static/wechat/images/outline1-1.png';
  import salary from '../../../static/wechat/images/outline1-2.png';
  import post_no from '../../../static/wechat/images/outline2-1.png';
  import post from '../../../static/wechat/images/outline2-2.png';
  import enterprise_no from '../../../static/wechat/images/outline3-1.png';
  import enterprise from '../../../static/wechat/images/outline3-2.png';
  export default {
    name: 'jobMainInfo',
    data () {
      return {
        msg: 'findJobs',
        showRules:false,
        isFixed: false, //是否固定的
        throttleScroll: null, //定义一个截流函数的变量
        salary_url:salary,
        post_url: post_no,
        enterprise_url: enterprise_no,
      }
    },
    methods:{
      toggleRules:function () {
        console.log(this.showRules);
        this.showRules = !this.showRules;
      },
      handleScroll() {
        let navH =this.$refs.top.getBoundingClientRect().top //header的高度
        if (navH<=0) {
          this.isFixed = true;
          if(navH<=0&&navH>=-250){
            this.salary_url = salary;
            this.post_url = post_no;
            this.enterprise_url = enterprise_no;
          }else if (navH>=-850&&navH<=-250) {
            this.salary_url = salary_no;
            this.post_url = post;
            this.enterprise_url = enterprise_no;
          } else {
            this.salary_url = salary_no;
            this.post_url = post_no;
            this.enterprise_url = enterprise;
          }
        } else {
          this.isFixed = false;
        }

      },
      gotoSalary(){
        this.salary_url = salary;
        this.post_url = post_no;
        this.enterprise_url = enterprise_no;
      },
      gotoPost(){
        this.salary_url = salary_no;
        this.post_url = post;
        this.enterprise_url = enterprise_no;
      },
      gotoEnterprise(){
        this.salary_url = salary_no;
        this.post_url = post_no;
        this.enterprise_url = enterprise;
      }
    },
    mounted(){
      this.$nextTick(() => {
        //这里使用监听的scroll的事件，为什么要使用的节流函数，如果不使用的，页面一直在滚动计算的，这样在
        //使用手机时候，出现非常卡的，隔一段时间计算，大大降低了性能的消耗（具体的好处自己去查资料）
        window.addEventListener('scroll', this.throttleScroll, false);
      });

      this.throttleScroll = throttle(this.handleScroll, 100);
    },
    deactivated() {
      //离开页面需要remove这个监听器，不然还是卡到爆。
      window.removeEventListener('scroll', this.throttleScroll);
    },
    props:['jobInfo','companyInfo']
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .rules{
    overflow: hidden;
    padding: 8px;
    border: 1px solid #ddd;
    border-top: none;
  }
  .rules span{
    display: block;

  }
  .rules div span:last-child{
    width: 100%;
    text-align:justify;
  }
  .job-page div .detail-content:last-child{
    padding: 0px 0px 50px 0px;
  }
  .job-page table tr:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .job-page table tr:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  .job-page table tr:first-child th,
  .job-page table tr:first-child td{
    border-top: none;
    border-right: none;
  }
  .job-page table tr:last-child th,
  .job-page table tr:last-child td{
    border-bottom: none;
  }
  .job-page table th{
    width: 30%;
    border-left: none;
  }
  .job-page table td{
    border-right: none;
  }
  .isFixed{
    position: fixed;
    top: 0;
    left: 2.5%;
    width: 95%;
    background: #f7f7f7;
    padding: 2% 0;
  }
</style>
